<template>
    <el-row class="main">
        <el-col class="padd20 posa">
        <el-row>
            <el-col class="title box box-pack-between btn">
                <div >
                    <el-select v-show="role=='super'" v-model="selectVal" placeholder="请选择" @change="handleSelect">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="劳育服务团队" value="劳育服务团队"></el-option>
                        <el-option label="学校管理员" value="学校管理员"></el-option>
                    </el-select>
                    <el-input style="width: 200px;" placeholder="搜索" v-model="searchText" @input="glylb()">
                        <i slot="suffix" class="el-input__icon el-icon-search cp" @click="glylb()"></i>
                    </el-input>
                    <el-button type="primary" class="reset-comfirm-btn" @click="openPopup">{{role=='super'?'添加服务团队（学校管理员）':'添加学校管理员'}}</el-button>
                    <el-button type="primary" class="reset-comfirm-btn" @click="zhidingPopup">指定学校管理员</el-button>
                </div>
            </el-col>
        </el-row>

        <el-row class="mt20">
            <el-col>
                <el-table :data="page.list" stripe style="width: 100%" :header-cell-style="{background:'#F0F1F8', color:'#2F3142'}" border>
                    <el-table-column label="序号" width="80px" fixed align="center">
                    	<template slot-scope="scope">
                    		{{(page.pageNum - 1) * page.pageSize + scope.$index + 1}}
                    	</template>
                    </el-table-column>
                    <el-table-column prop="schoolName" label="学校" width="300" align="center"></el-table-column>
                    <el-table-column prop="roleName" label="角色" width="180" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="userCode" label="登录账号" align="center"></el-table-column>
                    <el-table-column prop="pwd" label="初始密码" align="center"></el-table-column>
                    <el-table-column prop="status" label="状态" width="80" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == '启用'" style="color: #18AC72;">启用</span>
                            <span v-else style="color: #F97762;">禁用</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="80">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status == '禁用'" size="mini" type="primary" plain
                                @click="changeStatus(scope.row.id,1)">启用</el-button>
                            <el-button v-if="scope.row.status == '启用'" size="mini" type="primary" plain
                                @click="changeStatus(scope.row.id,0)">禁用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @current-change="glylb" background layout="prev, pager, next" :total="page.total"
                    :current-page="page.pageNum" :page-size="page.pageSize" hide-on-single-page></el-pagination>
            </el-col>
        </el-row>

        <add-admin :dialogVisible="tkzt" @closeTk="closeTk" @updateList="glylb()" :title="title"></add-admin>
        <zhiding-admin :dialogVisible="zhiding" @closeTk="closeZhidingPopup" @updateList="glylb()" title="指定管理员"></zhiding-admin>
        </el-col>
    </el-row>
</template>

<script>
    import addAdmin from './components/tjgly.vue';
    import zhidingAdmin from './components/zhiding.vue';

    export default {
        components: {
            addAdmin,zhidingAdmin
        },
        data() {
            return {
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                tkzt: false,
                zhiding: false,
                selectVal: '',
                searchText: '',
                roleName:'',
                title:'添加',
                schoolid:this.$store.state.schoolId,
                role:this.$store.state.maxRole,
                team_schoolid:this.$store.state.maxRole=='team'?this.$store.state.schoolId:null,
            };
        },
        mounted() {
            this.glylb();
        },
        methods: {
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            closeTk() {
                this.tkzt = false;
            },
            openPopup() {
                this.tkzt = true
            },
            zhidingPopup() {
                this.zhiding = true
            },
            closeZhidingPopup() {
                this.zhiding = false;
            },
            glylb(pageNum) {
                var params = {
                    'roleName':this.roleName,
                    'searchText':this.searchText,
                    'pageNum': pageNum,
                    'schoolid':this.team_schoolid
                };
                this.$api.szhgl.glylb(params).then(res => {
                    if (res.code == '0') {
                        this.page = res.list;
                        // console.log(res.list);
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            changeStatus(userid, status) {
                var params = {
                    'userId': userid,
                    'status': status
                };
                this.$api.szhgl.qyjy(params).then(res => {
                    if (res.code == '0') {
                        this.$message.success('操作成功！');
                        this.glylb();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            handleSelect(e) {
                this.roleName = e;
                this.glylb();
            },
            clickAdd() {

            }
        }
    }
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .main {
        position: relative;
        height: 100%;
    }

    .posa {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow-y: auto;
        background-color: #fff;

        h3 {
            font-size: 18px;
        }

        .label {
            display: block;
            width: 76px;
            height: 40px;
            line-height: 40px;
            font-weight: 600;
            font-size: 15px;
            margin-right: 10px;
        }
        .btn {
            // width: 120px;
            // height: 36px;
            // line-height: 36px;
            // background: #F3F4FB;
            // border: 1px solid #626BF1;
            // color: #626BF1;
            // border-radius: 10px;
            // cursor: pointer;
            // font-size: 16px;
            display: flex;
        }
    }
</style>
